<template>
  <div class="container">
    <a-breadcrumb>
      <a-breadcrumb-item>
        <icon-home />
      </a-breadcrumb-item>
      <a-breadcrumb-item>题库</a-breadcrumb-item>
      <a-breadcrumb-item>题集题目管理</a-breadcrumb-item>
    </a-breadcrumb>
    <a-card :title="collectionFullName">
      <a-row style="margin-bottom: 16px">
        <a-col :span="12">
          <a-space>
            <a-button type="primary" @click="addNew">
              <template #icon>
                <icon-plus />
              </template>
              新建
            </a-button>
          </a-space>
        </a-col>
        <a-col :span="12" class="btn-right-col">
        </a-col>
      </a-row>
    </a-card>

    <a-card :style="{ width: '100%' }" :bordered="false">
      <a-card-grid v-for="(item, index) in problems" :key="index" :hoverable="index % 2 === 0" :style="{ width: '50%' }"
        :bordered="false">
        <a-card :style="{ margin: '20px' }" :bordered="false">
          <template #title>
            <div style="font-size: small; color:darkgray;">
              <span>Problem {{ index + 1 }}</span>
            </div>
          </template>
          <template #extra>
            <div style="font-size: smaller; color:darkorange;">
              <IconLink></IconLink>&nbsp;<span>{{ item.problemId }}</span>&nbsp;&nbsp;&nbsp;
              <IconBarChart></IconBarChart>&nbsp;<span>{{ item.difficulty }}</span>&nbsp;&nbsp;
              <IconQuestionCircle></IconQuestionCircle>&nbsp;<span>{{ item.questionModeName }}</span>&nbsp;&nbsp;&nbsp;
            </div>
          </template>
          <template #actions>
            <span class="icon-hover">
              <IconUp />
            </span>
            <span class="icon-hover">
              <IconDown />
            </span>
            <span class="icon-hover">
              <IconFindReplace />
            </span>
            <span class="icon-hover">
              <IconEdit />
            </span>
            <span class="icon-hover">
              <IconDelete />
            </span>
          </template>

          <!-- <div v-html="item.questions[0].latexText"> </div> -->
          <div v-html="formatVueLatex(item.questions[0].latexText)"> </div>

          <!-- <span>
            ```math
            x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
            ```
          </span> -->

          <!-- <vue-latex :expression="'\\begin{gathered} a \\diamond b=a^2-b^2 \\  a \\star b=(a-b)^2 \\end{gathered}'" display-mode=""></vue-latex>
          <vue-latex :expression="'(5 \\diamond 3) \\star 6 ?'"></vue-latex>  -->
          <!-- <div v-html="formatVueLatex(item.questions[0].vueLatex)"> </div>-->

          <!-- <p>Consider these two operations:</p>
          <p><vuelatex expression="\begin{gathered} a \diamond b=a^2-b^2 \\  a \star b=(a-b)^2 \end{gathered}" display-mode /></p>
          <p>What is the value of <VueLatex expression="(5 \diamond 3) \star 6 ?" /></p> -->

          <!-- <div>
            <p>Consider these two operations:</p>
            <p><vue-latex :expression="'\\begin{gathered} a \\diamond b=a^2-b^2 \\  a \\star b=(a-b)^2 \\end{gathered}'" display-mode></vue-latex></p>
            <p>What is the value of <vue-latex :expression="'(5 \\diamond 3) \\star 6 ?'"></vue-latex></p>
          </div> -->

        </a-card>
      </a-card-grid>
    </a-card>


  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { formatTime, getPostData } from '@/utils';
import useLoading from '@/hooks/loading';
import type { TableColumnData, TableData } from '@arco-design/web-vue/es/table/interface';
import { getList, getProblemList, getProblemCollection } from '@/api/problems/collections';
import { getExamOptions } from '@/api/lms/exams';
import { formModel, pagination, columns } from './const';
import { modalType, currRecord, addNew, btnEdit, btnDelete, btnEditSave } from './event';
import { getAppOptions } from '@/api/base';
import { formatVueLatex } from '@/api/latex';
import { IconBarChart, IconDelete, IconDown, IconEdit, IconFindReplace, IconQuestionCircle, IconSort, IconUp } from '@arco-design/web-vue/es/icon';
import { VueLatex } from 'vatex';
import katex from 'katex';
import 'katex/dist/katex.min.css';
import 'katex/dist/katex.min.js';
import 'katex/dist/contrib/auto-render.min.js';
//import { renderMathInElement } from 'katex/dist/contrib/auto-render.min.js';
import renderMathInElement from "https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/contrib/auto-render.mjs";

const scrollbar = ref(true);
const scroll = {
  x: 2000,
  y: 200
};
const scrollPercent = {
  x: '100%',
  y: '100%'
};

let collectionCategoryIds = getAppOptions('ITEM_CATEGORY');
let examOptions = getExamOptions();
const expression = "\\int_0^\\infty x^2 \\mathrm{d} x";
const route = useRoute();
const { loading, setLoading } = useLoading(true);

const renderData = ref<TableData[]>();

const { id } = route.query;
//const collectionId = Number(id);

let collection = ref({} as any);
let collectionFullName = ref("" as String);
let problems = ref([]);


onMounted(async () => {
  console.log('mounted');

});


const search = () => {
  pagination.current = 1;

  fetchData();
};

const onPageChange = (current: number) => {
  pagination.current = current;

  fetchData();
};

const fetchData = async () => {
  setLoading(true);
  let collectionId = Number(id).valueOf();
  collection.value = await getProblemCollection(collectionId);
  collectionFullName.value = "题集题目: #" + collection.value.collectionId + " | " + collection.value.collectionName;


  let problemList = await getProblemList(collectionId);
  console.log("problems: ", problems.value);
  problems.value = problemList;

  setLoading(false);

  // let pdata = getPostData(pagination, formModel.value, 'collectionId');
  // setLoading(true);
  // const data = await getProblemList(pdata);
  // pagination.total = data.totalCount;
  // renderData.value = data.items;
  // setLoading(false);

  renderPage();
};

const renderPage = () => {
  document.addEventListener("DOMContentLoaded", function () {
    renderMathInElement(document.body, {
      delimiters: [
        { left: "$", right: "$", display: false },
        { left: "\\(", right: "\\)", display: false }
      ],
      throwOnError: false
    });
  });
};

fetchData();

</script>
